<template>
    <div>
        {{now}}
        <button @click="start=!start">{{start?'停止':"开始"}}</button>
    </div>
</template>

<script>
import moment from 'moment'
    export default {
        name: 'Clock',
        data() {
            this.moment = moment;
            return {
                start: false,
                now:moment(new Date()).format("YYYY-MM-DD HH:mm:ss")
            }
        },
        watch: {
            start() {
                this.startClock();
            },
        },
        methods: {
            startClock() {
                 clearInterval(this.clockInterval);
                 if(this.start) {
                      this.clockInterval =  setInterval(()=>{
                        this.now = moment(new Date()).format("YYYY-MM-DD HH:mm:ss");
                    },1000)
                 }
            }
        },

        /***
         * 整个生命周期的过程是： 在点击加载时钟后 执行beforeCreate created beforeMount mounted
         * 点击开始后 就开始执行修改部分的生命周期 beforeUpdate updated
         * 点击销毁后就开始执行 beforeDestroy destroyed
         */

        // 生命周期部分
        beforeCreate() {
            console.log('beforeCreate');
        },
        created() {
            console.log('created');
        },
        beforeMount() {
             console.log('beforeMount');
        },
        mounted() {
            console.log('mounted');
            this.startClock();
        },
        beforeUpdate() {
              console.log('beforeUpdate');
        },
        updated() {
            console.log('updated');
        },
        beforeDestroy() {
            console.log('beforeDestroy');
             clearInterval(this.clockInterval);
        },
        destroyed() {
            console.log('destroyed');
        }
    }
</script>
